<%--
  Created by IntelliJ IDEA.
  User: MadFrog
  Date: 2017/6/20
  Time: 11:53
  问卷调查做题界面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>问卷调查</title>
    <%@include file="../common/_head.jsp"%>
    <style type="text/css">
        .opt {
            text-align:center;
            position:fixed;
            bottom: 2em;
            left:0;
            right:0;
            font-size: 15px;
        }
        .opt a{
            font-size: 25px;
        }
        .opt a:link {
            color : purple;
        }
        .opt a:link {
            color : purple;
        }
        .opt a:link {
            color : purple;
        }
        .opt a:link {
            color : purple;
        }
    </style>
</head>
<body ontouchstart>

<div id="subject_div">
    <!--题目div-->
    <div id="subject" class="weui-cells weui-cells_checkbox">
        <p style="padding: 1em" id="question_stem"></p>
        <div id="choices"></div>
    </div>
    <!--操作div-->
    <div class="opt">
        <p id="status"></p>
        <span>
        <a class="opt_a" href="javascript:;" onclick="previous()"><<<<<&nbsp&nbsp&nbsp&nbsp</a>
        <a class="opt_a" href="javascript:;" onclick="submit()">提交</a>
        <a class="opt_a" href="javascript:;" onclick="next()">&nbsp&nbsp&nbsp&nbsp>>>>></a>
    </span>
    </div>
</div>
<div id="loading_div" class="weui-loadmore">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
</div>

<%@include file="../common/_foot.jsp"%>
<script type="text/javascript">
    var currentNum=0;
    var data;
    // 保存学生做的答案json，key为题目主键，value为选项序号
    var answer={};
    /**
     * 保存小题结果用数组方法是不合适的，因为用户可以回头修改，问题变复杂了。
     * 用map就完全没有这个问题。
     *
     **/
    $(function () {
        $("#loading_div").hide();
        $.ajax({
            type: "get",
            url: "${ctx}/student/subject/listSubjectByQuestionnaire",
            dataType: "json",
            success: function (re) {
                data = re.data;
                loadSubject();
            },
            error: function () {
            }
        });
    });

    function previous() {
        if(!selected()){
            $.toast("请完成当前题目", "cancel");
            return;
        }
        if(--currentNum<=-1){
            $.toast("已经是最前面了", "cancel");
            return;
        }
        loadSubject();
    }
    function submit() {
        // 检查题目是否全部完成
        if(Object.keys(answer).length!=data.length){
            $.toast("请完成全部题目后再提交", "cancel");
            return;
        }
        // 隐藏操作功能
        $("#subject_div").hide();
        $("#loading_div").show();
        // 提交答案
        var param = {};
        // json转构造字符串数组
        var subjectId_answer = [];
        for(var sId in answer){
            subjectId_answer.push(sId + "-" + answer[sId]);
        }
        param.subjectId_answer = subjectId_answer;
        $.ajax({
            type: "post",
            url: "${ctx}/student/questionnaire/finish",
            dataType: "json",
            data : param,
            success: function (re) {

                if(re.success==true){
                    $.toast("提交成功", function () {
                        window.location = "${ctx}/student/index";
                    });
                }
            },
            error: function () {
            }
        });
    }
    function next() {
        if(!selected()){
            $.toast("请完成当前题目", "cancel");
            return;
        }
        if(++currentNum>=data.length){
            $.toast("已经是最后面了", "cancel");
            return;
        }
        loadSubject();
    }
    function loadSubject() {
        // 渲染题干、选项
        $("#choices").empty();
        var subject = data[currentNum];
        $("#question_stem").html(subject.num + ".&nbsp&nbsp" + subject.stem);
        for(var i=1; i<8; i++){
            var choiceName = "choice" + i;
            if(subject[choiceName]!=null){
                var subjectText = "<label class=\"weui-cell weui-check__label\" for=\"" + i + "\">\n" +
                    "        <div class=\"weui-cell__hd\">\n" +
                    "            <input type=\"radio\" class=\"weui-check\" name=\"" + subject.id + "\" id=\"" + i + "\" value=" + i + ">\n" +
                    "            <i class=\"weui-icon-checked\"></i>\n" +
                    "        </div>\n" +
                    "        <div class=\"weui-cell__bd\">\n" +
                    "            <p>" + subject[choiceName] + "</p>\n" +
                    "        </div>\n" +
                    "    </label>";
                $("#choices").append(subjectText);
            }
        }
        // 设置状态
        $("#status").text("已完成" + (Object.keys(answer).length+1) + "/" + data.length);
        // 为题目选择以前做过的值
        initSelection();
        // 为选项增加值的改变事件，保存已做题目的答案，保存形式是“题目主键-选项序号”
        $('input[type=radio]').change(function() {
            var subject = data[currentNum];
            var _sId = subject.id;
            var _answer = $(this).val();
            answer[_sId] = _answer;
        });
    }
    /**
     * 切换题目前，检查当前题目是否选择
     * 如果选择了返回true，没有选择返回false
     */
    function selected() {
        var size = $("input[type='radio']:checked").length;
        if(size==0){
            return false;
        }else {
            return true;
        }
    }
    /**
     * 初始化已经完成了的题目的选择
     */
    function initSelection() {
        var key = $('input[type=radio]').attr('name');
        var value = answer[key];
        if(value==undefined){
            return;
        }else{
            $('input[type=radio][value=' + value + ']').attr("checked", true);
        }
    }

    /**
     * 保存用户做的题目
     */
    // function saveSubjectAnswer() {
    //     var subject = data[currentNum];
    //     var _sId = subject.id;
    //     var _answer = $('input[type=radio]').val();
    //     answer[_sId] = _answer;
    // }
</script>
</body>
</html>